<template>
  <!-- 用户信息区域 -->
  <div class="user-info-section">
    <div class="user-avatar-container">
      <div class="user-avatar">
        <img :src="userInfo.avatar" alt="用户头像" class="avatar-image" />
      </div>
    </div>
    <div class="user-welcome">
      <h2>欢迎回来，{{ userInfo.name }}</h2>
      <p>今天是 {{ currentDate }}</p>
    </div>
  </div>

  <!-- 数据概览卡片 -->
  <div class="stats-container">
    <div class="stat-card">
      <div class="stat-icon student">
        <el-icon>
          <User />
        </el-icon>
      </div>
      <div class="stat-info">
        <div class="stat-value">{{ totalStudents }}</div>
        <div class="stat-label">学生总数</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon teacher">
        <el-icon>
          <Avatar />
        </el-icon>
      </div>
      <div class="stat-info">
        <div class="stat-value">{{ totalTeachers }}</div>
        <div class="stat-label">教师总数</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon course">
        <el-icon>
          <Reading />
        </el-icon>
      </div>
      <div class="stat-info">
        <div class="stat-value">{{ totalCourses }}</div>
        <div class="stat-label">课程总数</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon class">
        <el-icon>
          <School />
        </el-icon>
      </div>
      <div class="stat-info">
        <div class="stat-value">{{ totalClasses }}</div>
        <div class="stat-label">班级总数</div>
      </div>
    </div>
  </div>

  <!-- 快捷操作 -->
  <div class="quick-actions">
    <h3>快捷操作</h3>
    <div class="action-cards">
      <div class="action-card" @click="navigateToPage('student-manage')">
        <el-icon>
          <User />
        </el-icon>
        <span>学生管理</span>
      </div>
      <div class="action-card" @click="navigateToPage('course-manage')">
        <el-icon>
          <Reading />
        </el-icon>
        <span>课程管理</span>
      </div>
      <div class="action-card" @click="navigateToPage('teacher-manage')">
        <el-icon>
          <Avatar />
        </el-icon>
        <span>教师管理</span>
      </div>
      <div class="action-card" @click="navigateToPage('class-manage')">
        <el-icon>
          <School />
        </el-icon>
        <span>班级管理</span>
      </div>
      <div class="action-card" @click="navigateToPage('grade-manage')">
        <el-icon>
          <Histogram />
        </el-icon>
        <span>成绩管理</span>
      </div>
      <div class="action-card" @click="navigateToPage('role-manage')">
        <el-icon>
          <Setting />
        </el-icon>
        <span>角色管理</span>
      </div>
    </div>
  </div>

  <!-- 数据筛选 -->
  <div class="filter-section">
    <h3>数据筛选</h3>
    <el-form :inline="true" :model="filterForm" class="filter-form">
      <el-form-item label="数据类型">
        <el-select v-model="filterForm.dataType" placeholder="请选择数据类型" @change="handleDataTypeChange">
          <el-option label="学生数据" value="students" />
          <el-option label="课程数据" value="courses" />
          <el-option label="教师数据" value="teachers" />
          <el-option label="班级数据" value="classes" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker v-model="filterForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="debouncedFilter">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!-- 数据图表 -->
  <div class="chart-section">
    <h3>数据趋势</h3>
    <div class="chart-container">
      <div class="chart-card">
        <div class="chart-header">
          <h4>月度学生增长趋势</h4>
          <el-select v-model="selectedTimeRange" size="small" style="width: 120px" @change="handleTimeRangeChange">
            <el-option label="最近6个月" value="6m" />
            <el-option label="最近1年" value="1y" />
          </el-select>
        </div>
        <div class="chart-content" ref="studentGrowthChart"></div>
      </div>
      <div class="chart-card">
        <div class="chart-header">
          <h4>课程完成率</h4>
        </div>
        <div class="chart-content" ref="courseCompletionChart"></div>
      </div>
    </div>
  </div>

  <!-- 详细数据 -->
  <div class="data-section">
    <h3>{{ currentDataTypeLabel }}数据</h3>
    <div class="data-stats">
      <div class="data-stat-item">
        <span class="data-label">{{ currentDataTypeLabel }}总数:</span>
        <span class="data-value">{{ currentDataValue }}</span>
      </div>
      <div class="data-stat-item" v-if="filterForm.dataType === 'students'">
        <span class="data-label">活跃学生:</span>
        <span class="data-value">{{ activeStudents }}</span>
      </div>
      <div class="data-stat-item" v-if="filterForm.dataType === 'courses'">
        <span class="data-label">进行中课程:</span>
        <span class="data-value">{{ ongoingCourses }}</span>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="data-list">
      <template v-if="filterForm.dataType === 'students'">
        <div class="data-list-item" v-for="(item, index) in currentStudentData" :key="index">
          <span class="data-field">{{ item.label }}:</span>
          <span class="data-field-value">{{ item.value }}</span>
        </div>
      </template>
      <template v-else-if="filterForm.dataType === 'courses'">
        <div class="data-list-item" v-for="(item, index) in currentCourseData" :key="index">
          <span class="data-field">{{ item.label }}:</span>
          <span class="data-field-value">{{ item.value }}</span>
        </div>
      </template>
      <template v-else>
        <div class="data-list-placeholder">请选择数据类型查看详细列表</div>
      </template>
    </div>
  </div>
</template>

<script setup>
/**
 * 首页组件
 * 功能：展示系统概览信息、数据统计、快捷操作和数据图表
 * 优化：添加了动画效果、响应式设计和性能优化
 */

// Vue 核心库导入
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';

// 路由和UI组件库导入
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 图标组件导入
import {
  User,
  Avatar,
  Reading,
  School,
  Histogram,
  Setting
} from '@element-plus/icons-vue';

// 导入ECharts
import * as echarts from 'echarts';

// 资源导入
import defaultAvatar from '@/assets/default-avatar.png';

// API导入
import { getUserInfo, getUserStatistics } from '@/api/profile';
import { getStudentGrowthData, getCourseCompletionData } from '@/api/stats';

const router = useRouter();

// 存储图表实例和resize事件处理器
const chartResizeHandlers = ref([]);

// ========== 数据定义 ==========

// 用户信息 - 从API获取，包含姓名和头像
const userInfo = ref({
  name: '管理员',
  avatar: defaultAvatar
})

// 基础统计数据 - 实际项目中应从API获取
const totalStudents = ref(1245);
const totalCourses = ref(89);
const totalTeachers = ref(67);
const totalClasses = ref(36);

// 扩展数据 - 实际项目中应从API获取
const activeStudents = ref(1180);
const ongoingCourses = ref(76);

// 筛选表单 - 用于数据过滤
const filterForm = ref({
  dataType: 'students',
  dateRange: []
});

// 图表相关数据
const selectedTimeRange = ref('6m'); // 时间范围选择器默认值
const studentGrowthChart = ref(null); // 学生增长图表DOM引用
const courseCompletionChart = ref(null); // 课程完成率图表DOM引用

// 详细数据列表
const currentStudentData = ref([
  { label: '1月', value: 1050 },
  { label: '2月', value: 1080 },
  { label: '3月', value: 1120 },
  { label: '4月', value: 1180 },
  { label: '5月', value: 1220 },
  { label: '6月', value: 1245 }
]);

const currentCourseData = ref([
  { label: '已完成', value: '65%' },
  { label: '进行中', value: '25%' },
  { label: '未开始', value: '10%' }
]);

// 图表数据
const chartData = reactive({
  studentGrowth: {
    '6m': {
      labels: [],
      data: []
    },
    '1y': {
      labels: [],
      data: []
    }
  },
  courseCompletion: []
});

// ========== 计算属性 ==========

// 根据选择的数据类型返回对应的统计值
const currentDataValue = computed(() => {
  switch (filterForm.value.dataType) {
    case 'students': return totalStudents.value;
    case 'courses': return totalCourses.value;
    case 'teachers': return totalTeachers.value;
    case 'classes': return totalClasses.value;
    default: return totalStudents.value;
  }
});

// 根据选择的数据类型返回对应的中文标签
const currentDataTypeLabel = computed(() => {
  switch (filterForm.value.dataType) {
    case 'students': return '学生';
    case 'courses': return '课程';
    case 'teachers': return '教师';
    case 'classes': return '班级';
    default: return '学生';
  }
});

// 获取当前日期，格式化为"YYYY年MM月DD日 星期X"
const currentDate = computed(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekday = weekdays[now.getDay()];
  return `${year}年${month}月${day}日 ${weekday}`;
});

// ========== 方法定义 ==========

// 从API获取用户信息
const fetchUserInfo = async () => {
  try {
    const res = await getUserInfo();
    if (res && res.data) {
      userInfo.value = res.data;
      // 如果没有头像，使用默认头像
      if (!userInfo.value.avatar) {
        userInfo.value.avatar = defaultAvatar;
      }
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    ElMessage.error('获取用户信息失败');
    userInfo.value = {
      name: '管理员',
      avatar: defaultAvatar
    };
  }
};

// 获取用户统计数据
const fetchUserStatistics = async () => {
  try {
    const res = await getUserStatistics();
    if (res.code === 200) {
      totalStudents.value = res.data.totalStudents || 0;
      totalCourses.value = res.data.totalCourses || 0;
      totalTeachers.value = res.data.totalTeachers || 0;
      totalClasses.value = res.data.totalClasses || 0;
    } else {
      console.error('获取统计数据失败:', res.message);
      ElMessage.error('获取统计数据失败');
    }
  } catch (error) {
    console.error('获取统计数据失败:', error);
    ElMessage.error('获取统计数据失败');
  }
};

// 获取图表数据
const fetchChartData = async () => {
  try {
    // 获取学生增长数据
    const studentRes = await getStudentGrowthData(selectedTimeRange.value);
    if (studentRes.code === 200 && studentRes.data) {
      chartData.studentGrowth[selectedTimeRange.value] = studentRes.data;
    } else {
      console.error('获取学生增长数据失败:', studentRes.message);
    }

    // 获取课程完成率数据
    const courseRes = await getCourseCompletionData();
    if (courseRes.code === 200 && courseRes.data) {
      chartData.courseCompletion = courseRes.data;
    } else {
      console.error('获取课程完成率数据失败:', courseRes.message);
    }

    // 渲染图表
    renderStudentGrowthChart();
    renderCourseCompletionChart();
  } catch (error) {
    console.error('获取图表数据失败:', error);
    ElMessage.error('获取图表数据失败');
  }
};

// 性能优化：防抖函数，用于处理频繁触发的事件
const debounce = (func, delay) => {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
};

// 处理数据筛选操作
const handleFilter = () => {
  ElMessage.success('查询完成');
};

// 防抖处理的筛选函数，避免频繁查询
const debouncedFilter = debounce(handleFilter, 300);

// 渲染学生增长饼状图（使用ECharts）
const renderStudentGrowthChart = () => {
  if (!studentGrowthChart.value) return;

  // 获取数据
  const data = chartData.studentGrowth[selectedTimeRange.value];

  // 创建饼图数据格式
  const pieData = data.labels.map((label, index) => ({
    name: label,
    value: data.data[index]
  }));

  // 初始化ECharts实例
  const myChart = echarts.init(studentGrowthChart.value);

  // 设置图表配置项
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: data.labels
    },
    series: [
      {
        name: '学生数量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: pieData,
        // 设置颜色
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4']
      }
    ],
    // 添加动画效果
    animationType: 'scale',
    animationEasing: 'elasticOut'
  };

  // 设置图表配置项
  myChart.setOption(option);

  // 添加响应式调整
  const resizeHandler = () => {
    myChart.resize();
  };
  window.addEventListener('resize', resizeHandler);

  // 保存清理函数引用
  chartResizeHandlers.value.push({
    chart: myChart,
    handler: resizeHandler
  });
};

// 渲染课程完成率饼图
const renderCourseCompletionChart = () => {
  if (!courseCompletionChart.value) return;

  let html = '<div class="pie-chart-container">';
  html += '<div class="pie-chart"></div>';

  // 添加图例
  html += '<div class="pie-legend">';
  chartData.courseCompletion.forEach(item => {
    html += `
      <div class="legend-item">
        <div class="legend-color" style="background-color: ${item.color}"></div>
        <div class="legend-text">${item.name}: ${item.value}%</div>
      </div>
    `;
  });
  html += '</div>';

  html += '</div>';
  courseCompletionChart.value.innerHTML = html;
};

// 组件挂载时获取用户信息和初始化数据
onMounted(() => {
  fetchUserInfo();
  fetchUserStatistics();
  fetchChartData();
  // 使用nextTick确保DOM已渲染
  nextTick(() => {
    renderStudentGrowthChart();
    renderCourseCompletionChart();
  });
});

// 组件卸载前清理图表实例和事件监听器
onBeforeUnmount(() => {
  chartResizeHandlers.value.forEach(({ chart, handler }) => {
    if (chart) {
      chart.dispose();
    }
    if (handler && typeof handler === 'function') {
      window.removeEventListener('resize', handler);
    }
  });
  chartResizeHandlers.value = [];
});

// 方法
const navigateToPage = (pageName) => {
  switch (pageName) {
    case 'student-manage':
      router.push('/student-manage');
      break;
    case 'course-manage':
      router.push('/course-manage');
      break;
    case 'teacher-manage':
      router.push('/teacher-manage');
      break;
    case 'class-manage':
      router.push('/class-manage');
      break;
    case 'grade-manage':
      router.push('/grade-manage');
      break;
    case 'role-manage':
      router.push('/role-manage');
      break;
    default:
      router.push('/student-manage');
  }
};

const handleDataTypeChange = () => {
  console.log(`已选择: ${filterForm.value.dataType}`);
};

// 监听时间范围变化，重新渲染学生增长图表
const handleTimeRangeChange = () => {
  renderStudentGrowthChart();
};

// 重置筛选条件
const resetFilter = () => {
  filterForm.value = {
    dataType: 'students',
    dateRange: []
  };
  ElMessage.info('已重置筛选条件');
};
</script>

<style scoped>
/* 用户信息区域样式 */
.user-info-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  animation: fadeInUp 0.6s ease;
}

/* 页面加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 为不同元素添加动画延迟 */
.stats-container .stat-card:nth-child(1) {
  animation: fadeInLeft 0.6s ease 0.1s both;
}

.stats-container .stat-card:nth-child(2) {
  animation: fadeInLeft 0.6s ease 0.2s both;
}

.stats-container .stat-card:nth-child(3) {
  animation: fadeInLeft 0.6s ease 0.3s both;
}

.stats-container .stat-card:nth-child(4) {
  animation: fadeInLeft 0.6s ease 0.4s both;
}

.action-cards .action-card:nth-child(1) {
  animation: fadeInUp 0.6s ease 0.1s both;
}

.action-cards .action-card:nth-child(2) {
  animation: fadeInUp 0.6s ease 0.2s both;
}

.action-cards .action-card:nth-child(3) {
  animation: fadeInUp 0.6s ease 0.3s both;
}

.action-cards .action-card:nth-child(4) {
  animation: fadeInUp 0.6s ease 0.4s both;
}

.action-cards .action-card:nth-child(5) {
  animation: fadeInUp 0.6s ease 0.5s both;
}

.action-cards .action-card:nth-child(6) {
  animation: fadeInUp 0.6s ease 0.6s both;
}

.chart-section {
  animation: fadeInRight 0.6s ease 0.2s both;
}

.filter-section {
  animation: fadeInUp 0.6s ease 0.3s both;
}

.data-section {
  animation: fadeInUp 0.6s ease 0.4s both;
}

.user-avatar-container {
  margin-right: 20px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ecf5ff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f2f5;
}

.avatar-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.user-welcome h2 {
  margin: 0 0 5px 0;
  font-size: 20px;
  color: #303133;
}

.user-welcome p {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

/* 数据概览卡片样式 */
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.stat-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: #fff;
}

.stat-icon.student {
  background-color: #409EFF;
}

.stat-icon.teacher {
  background-color: #67C23A;
}

.stat-icon.course {
  background-color: #E6A23C;
}

.stat-icon.class {
  background-color: #F56C6C;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

/* 快捷操作样式 */
.quick-actions {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.quick-actions h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 16px;
  color: #303133;
}

.action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.action-card {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #409EFF, #67C23A, #E6A23C, #F56C6C);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.action-card:hover::after {
  transform: scaleX(1);
}

.action-card:hover {
  background-color: #ecf5ff;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-card .el-icon {
  font-size: 24px;
  color: #409EFF;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.action-card:hover .el-icon {
  transform: scale(1.1);
}

.action-card span {
  font-size: 14px;
  color: #606266;
}

/* 筛选区域样式 */
.filter-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.filter-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 16px;
  color: #303133;
}

.filter-form {
  margin-bottom: 0;
}

/* 图表区域样式 */
.chart-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 16px;
  color: #303133;
}

.chart-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chart-header h4 {
  margin: 0;
  font-size: 14px;
  color: #303133;
}

.chart-content {
  height: 200px;
  position: relative;
}

/* 柱状图样式 */
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  padding-bottom: 30px;
}

.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
}

.bar {
  width: 30px;
  background: linear-gradient(to top, #409EFF, #79bbff);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  position: relative;
}

.bar:hover {
  background: linear-gradient(to top, #337ecc, #66b1ff);
}

.bar-label {
  margin-top: 5px;
  font-size: 12px;
  color: #606266;
}

.bar-value {
  position: absolute;
  top: -20px;
  font-size: 12px;
  color: #303133;
  font-weight: bold;
}

/* 饼图样式 */
.pie-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.pie-chart {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  margin-bottom: 15px;
  background: conic-gradient(#67C23A 0deg 234deg,
      #E6A23C 234deg 324deg,
      #F56C6C 324deg 360deg);
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 5px;
}

.legend-text {
  color: #606266;
}

/* 数据区域样式 */
.data-section {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 20px;
}

.data-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 16px;
  color: #303133;
}

.data-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-bottom: 20px;
}

.data-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #606266;
}

.data-label {
  font-size: 14px;
  color: #606266;
}

.data-value {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

/* 数据列表样式 */
.data-list {
  margin-top: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.data-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.data-list-item:last-child {
  border-bottom: none;
}

.data-field {
  color: #606266;
  font-weight: 500;
}

.data-field-value {
  color: #303133;
  font-weight: 600;
}

.data-list-placeholder {
  text-align: center;
  color: #909399;
  padding: 40px 0;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .chart-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .user-info-section {
    flex-direction: column;
    text-align: center;
  }

  .user-avatar-container {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .stats-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .action-cards {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .chart-container {
    grid-template-columns: 1fr;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .stats-container {
    grid-template-columns: 1fr;
  }

  .action-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .user-welcome h2 {
    font-size: 18px;
  }

  .filter-form {
    flex-direction: column;
  }

  .filter-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .data-stats {
    flex-direction: column;
    gap: 10px;
  }
}
</style>